<template>
    <div class="app">
        <div class="bj">
            <img style="width:100%;height:auto;filter:brightness(1.8)"
                src="https://pages.anjukestatic.com/fe/esf/img/aa78dce1/sy_nav_img_peitu_maifang@2x.png" alt="" />
        </div>
        <div class="a">
            <h1>我的空间</h1>
        </div>
        <div class="bx">
            <div class="b">
                <div class="c">
                    个人信息
                </div>
                <div class="d">
                    头像: <img src="../assets/666.jpg" alt="">
                </div>
                <ul>
                    <li>
                        昵称: {{ data.name }}
                    </li>
                    <li>
                        <span>修改昵称:</span>
                        <input type="text" v-model="xname" :placeholder="data.name">
                        <span v-show="show" style="font-size:15px;color:red">昵称过长</span>
                        <button @click="xgnm()">确认修改</button>
                    </li>
                    <li>
                        <span>修改密码:</span>
                        <input @blur="check_pwd" v-model="pwd" type="text" placeholder="旧密码">
                        <span v-show="showmm" style="font-size:15px;color:red">密码错误</span>
                        <span v-show="showmm2" style="font-size:15px;color:red">请先输入旧密码</span>
                        <input type="text" v-model="xpwd" placeholder="新密码">
                        <span v-show="showm" style="font-size:15px;color:red">只能使用六位数字</span>
                        <button @click="xgmm">确认修改</button>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: "",
            xname: '',
            pwd: "",
            xpwd: "",
            show: false,
            showm: false,
            showmm: false,
            showmm2: false,
        }
    },
    mounted() {
        this.shuju() //调用函数获取用户信息显示在页面上
    },
    methods: {
        shuju() {
            let hh = JSON.parse(localStorage.getItem("data"))//从浏览器缓存中获取用户信息保持变量中
            if (hh) {//判断缓存中是否有用户信息
                const name = `name=${hh.name}`
                console.log(name)
                this.axios.post(this.$store.state.url + '/xh/user/shuju', name).then(res => {//发送请求查询当前用户全部信息
                console.log(res.data[0])
                    this.data = res.data[0]//赋值给data属性，用来页面显示用户信息
                })
            } else {//如果浏览器缓存中没有用户信息则表示未处于登录状态，跳转回主页，无法查看个人中心，并提示登录
                alert("请先登录")
                this.$router.push("/")
            }
        },
        xgnm() {//修改用户名
            let reg = /^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,6}$/ // 设置正则验证
            if (reg.test(this.xname)) {//正则验证通过
                let params = `xname=${this.xname}&name=${this.data.name}`//声明变量传参
                this.axios.put(this.$store.state.url + '/xh/user/xgnm', params).then(res => {//发送修改请求
                    console.log(res)
                    if (res.data.code == 200) {//修改成功
                        this.data.name = this.xname//更新页面数据
                        localStorage.setItem('data', JSON.stringify(this.data)) //更新浏览器缓存
                        location.reload()//刷新页面让导航条的用户名重新从浏览器缓存拿数据更新信息
                        alert('修改成功!')
                    } else {
                        alert('修改失败!')
                        location.reload()//刷新页面
                    }
                })
            } else {
                this.show = true//正则验证不通过，显示提示信息
            }

        },
        check_pwd() {
            if (this.pwd != "") {//输入了旧密码，失去焦点，判断密码是否正确
                this.showmm2 = false//如果正确关闭密码错误提示
                let params = `pwd=${this.pwd}&name=${this.data.name}`//声明变量传参
                this.axios.post(this.$store.state.url + '/xh/user/check_pwd', params).then(res => {//发送请求判断密码是否正确
                    if (res.data.code != 200) {//密码错误
                        this.showmm = true//显示密码错误提示
                    } else {
                        this.showmm = false//关闭密码错误提示
                    }
                })
            } else {
                this.showmm2 = true//判断是否输入旧密码，未输入则提示输入旧密码
            }
        },
        xgmm() {//修改密码
            if (this.pwd == "") {//判断是否输入旧密码，未输入则提示输入旧密码并终止函数，显示提示输入旧密码
                this.showmm2 = true
                return
            }
            if(this.showmm == true){return}//如果旧密码错误，结束函数不执行修改命令
            let reg = /^\d{6}$/
            if (reg.test(this.xpwd)) {//判断新密码格式是否正确
                let params = `xpwd=${this.xpwd}&name=${this.data.name}`
                this.axios.put(this.$store.state.url + '/xh/user/xgmm', params).then(res => {
                    console.log(res)
                    if (res.data.code == 200) {//修改成功
                        localStorage.removeItem("data");//清空浏览器用户信息.提示重新登录
                        alert('修改成功!请重新登陆')
                        this.$router.push('/')//返回首页
                        location.reload()//刷新页面清除页面旧信息
                    } else {
                        alert('修改失败!')//修改失败提示，一般情况新旧密码重复才会失败
                        location.reload()
                    }
                })
            } else {
                this.showm = true//密码格式不正确，显示提示信息
            }
        },
        
    }
}
</script>


<style lang="scss" scoped>
.app {
    width: 100%;
    position: relative;

    button:hover {
        filter: brightness(1.3);
        cursor: pointer;
    }
}

.bx {
    width: 1252px;
    margin: auto;
}

.a {
    position: absolute;
    z-index: 2;
    top: 8vw;
    text-align: center;
    color: rgb(72, 64, 56);
    left: 20%;

    h1 {
        padding: 20px;
        border: 1px solid rgb(155, 155, 155);
        font-size: 60px;
        background-color: rgba($color: #ffffff, $alpha: 0.1);
        margin-bottom: 20px;
    }
}

.b {
    width: 92%;
    margin: auto;
    border: 1px solid #ebebeb;

    .c {
        height: 40px;
        padding: 15px 0 0 10px;
        color: #ffffff;
        background-color: #ffac5f;
    }

    .d {
        display: flex;
        padding: 20px;
        height: 90px;
        border-bottom: 1px solid #ebebeb;
        align-items: center;
        justify-content: left;

        img {
            width: 80px;
            margin: 0 60px;
            height: 80px;
            border-radius: 50%;
            border: 2px solid rgb(254, 140, 10);
        }
    }

    ul {
        list-style-type: none;
        display: flex;
        padding: 20px;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
        color: rgb(65, 65, 65);

        li {
            display: flex;
            height: 100px;
            flex-wrap: nowrap;
            justify-content: left;
            align-items: center;
            width: 100%;
            font-size: 20px;

            span {
                font-size: 20px;
            }

            input {
                outline: none;
                height: 30px;
                margin-left: 20px;
                border-radius: 5px;
                font-size: 15px;
                padding-left: 5px;
                border: 1px solid rgb(151, 151, 151);
            }

            button {
                border: 0;
                padding: 10px 20px;
                color: rgb(255, 255, 255);
                background-color: #ff9a3c;
                border-radius: 5px;
                margin-left: 20px;

                &:hover {
                    background-color: rgb(255, 124, 9)
                }
            }
        }
    }
}
</style>
